<!DOCTYPE html>
<html lang="zh_CN" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Cherry VIP</title>
    <header th:replace="header::html"></header>
    <link rel="stylesheet" th:href="@{/xadmin/css/register.css}"/>
    <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon"/>
</head>
<body class="login-bg">
<div class="login layui-anim layui-anim-up">
    <div class="message" th:text="#{message.titleregister}"></div>
    <div id="darkbannerwrap"></div>

    <form class="layui-form" id="formData">
        <input id="username" name="username" th:placeholder="#{message.username}"
               type="text" lay-verify="required"
               autocomplete="off">
        <hr class="hr15">
        <input id="password" name="password" th:placeholder="#{message.password}"
               type="password" lay-verify="required|password"
               autocomplete="off">
        <hr class="hr15">
        <input id="lpassword" name="lpassword" th:placeholder="#{message.repassword}" type="password"
               lay-verify="required|lpassword"
               autocomplete="off">
        <hr class="hr15">
        <input id="telephone" name="telephone" th:placeholder="#{message.telephone}"
               type="text" lay-verify="required|phone|number"
               autocomplete="off">
        <hr class="hr15">
        <input id="smsCode" name="smsCode" th:placeholder="#{message.sms}" style="width: 55%" type="text"
               lay-verify="required" autocomplete="off">
        <button id="sms" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal">[[#{message.send}]]
        </button>
        <hr class="hr15">
        <input id="nickname" name="nickname" th:placeholder="#{message.nickname}"
               type="text" lay-verify="required"
               autocomplete="off">
        <hr class="hr15">
        <input style="width: 100%;" id="register" lay-submit="" lay-filter="register" type="button"
               th:value="#{message.bioregister}">
        <hr class="hr15">
        <!--        <div style="float: right;">-->
        <!--            <a th:href="@{user-register.html(lang='zh_CN')}">[[#{message.chinese}]]</a>-->
        <!--            |-->
        <!--            <a th:href="@{user-register.html(lang='en_US')}">[[#{message.english}]]</a>-->
        <!--        </div>-->
        <div style="text-align: right;float: left;">
            <a href="/login.html">[[#{message.login}]]</a>
        </div>
    </form>
</div>
<script type="text/javascript">
    layui.use(['form', 'jquery', 'layer', 'util'], function () {
        var form = layui.form,
            $ = layui.jquery,
            util = layui.util,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            username: function (value) {
                if (value.length < 4) {
                    return '用户名至少得4个字符啊';
                }
            },
            password: [/(.+){4,12}$/, '密码必须4到12位'],
            lpassword: function (value) {
                if ($('#password').val() != $('#lpassword').val()) {
                    return '两次密码不一致';
                }
            }
        });

        //获取校验码
        $("#sms").click(sendCode);

        //发送验证码
        function sendCode() {
            var mobile = $("#telephone").val();
            if (mobile == null || mobile == '') {
                layer.msg("请输入手机号码", {icon: 2});
            } else {
                var loading = layer.load();
                $.ajax({
                    url: "/register/sendSms/" + mobile,
                    type: "POST",
                    dataType: "json",
                    success: function (data) {
                        if (data.Code == 'OK') {
                            //发送成功
                            layer.close(loading);
                            layer.alert("已发送验证码，请注意查收", {icon: 6});
                            checkSms();
                        } else {
                            //发送失败
                            layer.close(loading);
                            layer.msg(data.Message, {icon: 2});
                        }
                    },
                    error: function (xhr) {
                        layer.close(loading);
                        layer.msg("发送服务器异常，请联系管理员", {icon: 2});
                    }
                });
            }
            return false;
        }

        //定时处理
        function checkSms() {
            var time = 60;
            $('#sms').attr("disabled", "disabled");
            var timer = setInterval(function () {
                if (time == 0) {
                    clearInterval(timer);
                    $('#sms').html("获取验证码");
                    $('#sms').removeAttr("disabled");
                } else {
                    $('#sms').html(time + "秒后重发");
                    time--;
                }
            }, 1000);
        }

        //监听提交
        form.on('submit(register)', function (data) {
            var loading = layer.load();
            $.ajax({
                url: "/register/reg",
                type: "post",
                dataType: "json",
                data: data.field,
                success: function (result) {
                    console.log(result);
                    if (result.code != 200) {
                        layer.close(loading);
                        layer.alert(result.msg, {icon: 2});
                    } else {
                        layer.close(loading);
                        layer.alert("注册成功", {icon: 6}, function (index) {
                            location.href = '/login.html';
                        });
                    }
                },
                error: function (xhr) {
                    layer.close(loading);
                    layer.msg("注册异常，请联系管理员", {icon: 2});
                }
            });
            return false;
        });
    });
</script>
</body>
</html>